<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:include="common :: header"></head>
</head>

<body>
<!--Page content-->
<div id="page-content" class=" animated fadeIn">
    <div class="row">
        <div class="col-xs-12">
            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">权限列表</h3>
                </div>
                <div class="panel-body">
                    <div class="pad-btm form-inline">
                        <div class="row">
                            <div class="col-sm-12 table-toolbar-left" id="toolbar">
                                 <span th:each="button: ${buttonList}">
                                    <button th:if="${#strings.containsIgnoreCase(button.code,'save')}" class="btn btn-primary freedom-add" th:shiro:hasPermission="${button.code}"><i th:class="${button.icon}"></i> [[${button.name}]]</button>
                                    <button th:if="${#strings.containsIgnoreCase(button.code,'update')}" class="btn btn-warning freedom-edit" disabled th:shiro:hasPermission="${button.code}"><i th:class="${button.icon}"></i> [[${button.name}]]</button>
                                    <button th:if="${#strings.containsIgnoreCase(button.code,'remove')}" class="btn btn-danger freedom-delete" disabled th:shiro:hasPermission="${button.code}"><i th:class="${button.icon}"></i> [[${button.name}]]</button>
                                 </span>
                                <button id="oc-btn" class="btn btn-success"><i class=""></i> 开展/折叠</button>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="listTable"
                               data-toolbar="#toolbar"
                               data-minimum-count-columns="2"
                               data-classes="table table-hover table-borderless"
                               data-sort-order="asc">
                            <thead>
                                <tr>
                                    <th data-align="" data-radio="true"></th>
                                    <th data-align="" data-field="name">名称</th>
                                    <th data-align="center" data-field="icon">图标</th>
                                    <th data-align="center" data-field="url">地址</th>
                                    <th data-align="center" data-field="type" data-formatter="typeFormatter">类型</th>
                                    <th data-align="center" data-field="code">权限编码</th>
                                    <th data-align="center" data-field="state" data-formatter="stateFormatter">状态</th>
                                    <th data-align="center" data-field="createTime">创建时间</th>
                                    <th data-align="center" data-field="updateTime">修改时间</th>
                                    <th data-align="center" data-formatter="actionFormatter">操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<!--End page content-->
<div th:include="common :: script"></div>
<script type="text/javascript" th:inline="javascript" >

    function typeFormatter(value, row) {
        var labelColor;
        var info;
        if (value == "1") {
            info = "模块";
            labelColor = "primary";
        } else if(value == "2"){
            info = "菜单";
            labelColor = "success";
        }else if(value == "3"){
            info = "按钮";
            labelColor = "warning";
        }
        return '<div class="label label-table label-'+ labelColor+'"> ' + info + '</div>';
    }

    function stateFormatter(value, row) {
        var labelColor;
        var info;
        if (value == "0") {
            info = "禁用";
            labelColor = "danger";
        } else if(value == "1"){
            info = "正常";
            labelColor = "success";
        }
        return '<div class="label label-table label-'+ labelColor+'"> ' + info + '</div>';
    }

    function actionFormatter(value, row) {
        var btnArr = [];
        var permissions = [[${permissions}]];

        if (permissions.indexOf("core:permission:remove") > -1) {
            btnArr.push('<a class="btn btn-danger btn-xs" href="javascript:;;" onclick="$.freedom.action.delete(\'' + row.id + '\')"><i class="fa fa-remove"></i> 删除</a>');
        }

        return btnArr.join('');
    }

    $(function() {
        /**
         *  init 方法中可传入的参数:
         *    id: "listTable",              // table id
         *    baseUrl: "",                  // 基础路径
         *    addUIUrl: "saveUI.html",       // 新增页面地址
         *    editUIUrl: "updateUI.html",     // 编辑页面地址
         *    deleteUrl: "remove.json",     // 删除地址
         *    listUrl: "list.json",         // 列表地址
         *    detailUIUrl: "detailUI.html", // 详情地址
         *    queryFormId: "queryForm",     // 搜索框表单 id
         *    columns：[],                  // bootstrap-table cell 参数，页面默认使用内嵌方式设置数据
         *    pagination：true              // 是否分页
         */
        var prefix = [[${prefix}]];
        $.freedom.ui.table.init({
            baseUrl: prefix,
            parentIdField: "pid", // 指定父id列
            treeShowField: "name", // 在哪一列展开树形
            treeGrid: true,     // 表格树
            pagination: false  // 分页
        });

        var state = ($.freedom.ui.table.options.treeGridState == "close");
        $("#oc-btn").on("click", function () {
            var action = (state ? "expandAll"  : "collapseAll");
            $("#" + $.freedom.ui.table.options.id).treegrid(action);
            state = !state;
        });
    });

</script>
</body>
</html>
